<template>
  <div class="filtrate-module">
    <el-select v-if="isAreaSelectShow" class="city-or-area-select" v-model="currentCityOrArea" size="small"
               @change="(event) => changeCityOrArea(event)">
      <el-option
          v-for="item in cityAndAreaList"
          :key="item.code"
          :label="item.name"
          :value="item.code"
          class="custom-select-option"
      />
    </el-select>
    <el-select class="time-filtrate-type-select" v-model="datePickerConfig.type" size="small"
               @change="(event) => changeTimeFiltrateType(event)">
      <el-option
          v-for="item in timeFiltrateTypeList.slice(0, isContainYearRange ? 4 : 3)"
          :key="item.id"
          :label="item.label"
          :value="item.value"
          class="custom-select-option"
      />
    </el-select>
    <div class="year-range" v-if="isContainYearRange && datePickerConfig.type === 'yearrange'">
      <el-date-picker
          v-model="yearRangeData.startYear"
          type="year"
          size="small"
          placeholder="开始年份"
          value-format="YYYY"
          :disabled-date="startYearPickerOptions"
          @change="submitFiltrateYear('start')"
      />
      <div class="year-range-middle-line">-</div>
      <el-date-picker
          v-model="yearRangeData.endYear"
          type="year"
          size="small"
          placeholder="结束年份"
          value-format="YYYY"
          :disabled-date="endYearPickerOptions"
          @change="submitFiltrateYear('end')"
      />
    </div>
    <el-date-picker
        v-else
        class="date-picker-model"
        v-model="datePickerModel"
        :type="datePickerConfig.type"
        size="small"
        :placeholder="datePickerConfig.placeholder"
        start-placeholder="请选择开始年份"
        end-placeholder="请选择结束年份"
        :value-format="datePickerConfig.valueFormat"
        :clearable="false"
        @change="(event) => changeTime(event)"
    />
  </div>
</template>

<script setup>
import {defineEmits, ref, onMounted, defineProps, watch} from "vue";

const props = defineProps({
  isAreaSelectShow: {
    type: Boolean,
    default: true
  },
  cityAndAreaList: {
    type: Array,
    default: () => []
  },
  defaultCurrentCity: {
    type: String,
    default: '210100'
  },
  isContainYearRange: {
    type: Boolean,
    default: false
  },
});

const emit = defineEmits(['changeFiltrateTime', 'changeTimeType'])

const currentYear = ref(null); // 当前年份
const currentCityOrArea = ref(props?.defaultCurrentCity)
const datePickerModel = ref('')
const yearRangeData = ref({
  startYear: '',
  endYear: ''
}) // 年范围data
const datePickerConfig = ref({
  type: 'year',
  placeholder: '请选择单年',
  valueFormat: 'YYYY'
})
const timeFiltrateTypeList = ref([
  {
    id: 1,
    label: '单月',
    value: 'month'
  },
  {
    id: 2,
    label: '单年',
    value: 'year'
  },
  {
    id: 3,
    label: '月范围',
    value: 'monthrange'
  },
  {
    id: 4,
    label: '年范围',
    value: 'yearrange'
  },
])

watch(
    () => props?.defaultCurrentCity,
    (newVal) => {
      currentCityOrArea.value = newVal
    },
    { immediate: true }
)

const changeCityOrArea = (item) => {
  emit('changeFiltrateTime', { areaCode: item, time: datePickerModel.value, type: datePickerConfig.value.type })
}

const changeTimeFiltrateType = (item) => {
  switch(item) {
    case 'month':
      datePickerConfig.value.placeholder = '请选择单月'
      datePickerConfig.value.valueFormat = 'YYYY-MM'
      break;
    case 'year':
      datePickerConfig.value.placeholder = '请选择单年'
      datePickerConfig.value.valueFormat = 'YYYY'
      break;
    case 'monthrange':
      datePickerConfig.value.placeholder = '请选择月范围'
      datePickerConfig.value.valueFormat = 'YYYY-MM'
      break;
    default: // yearRange
      datePickerConfig.value.placeholder = '请选择年范围'
      datePickerConfig.value.valueFormat = 'YYYY'
      break;
  }
  emit('changeTimeType', item)
  datePickerModel.value = ''
  yearRangeData.value.startYear = ''
  yearRangeData.value.endYear = ''
}

const changeTime = (item) => {
  emit('changeFiltrateTime', { areaCode: props?.isAreaSelectShow ? currentCityOrArea.value : undefined, time: item, type: datePickerConfig.value.type })
}

const startYearPickerOptions = (time) => {
  // 开始年份禁用校验
  const year = time.getFullYear();
  if (yearRangeData.value.endYear) {
    return year > Number(yearRangeData.value.endYear) || year > currentYear.value;
  } else {
    return year > currentYear.value;
  }
};

const endYearPickerOptions = (time) => {
  // 结束年份禁用校验
  const year = time.getFullYear();
  if (yearRangeData.value.startYear) {
    return year < Number(yearRangeData.value.startYear) || year > currentYear.value;
  } else {
    return year > currentYear.value;
  }
};

const submitFiltrateYear = (yearType) => {
  // 提交年份范围
  if (yearRangeData.value.startYear && yearRangeData.value.endYear) {
    emit('changeFiltrateTime', { areaCode: currentCityOrArea.value, time: [yearRangeData.value.startYear, yearRangeData.value.endYear], type: datePickerConfig.value.type })
  }
};

onMounted(() => {
  const date = new Date();
  datePickerModel.value = (Number(date.getFullYear()) - 1).toString()
  currentYear.value = new Date().getFullYear();
})
</script>

<style scoped lang="less">
.filtrate-module {
  display: flex;
  align-items: center;
  .city-or-area-select {
    width: 80px;
    margin-right: 10px;
  }
  .time-filtrate-type-select {
    width: 70px;
    margin-right: 10px;
  }
  .date-picker-model {
    width: 100px;
  }
  /deep/ .el-select__wrapper {
    background: #204485;
    .el-select__selected-item {
      color: white;
    }
  }
  /deep/ .el-input__wrapper {
    background: #204485;
    .el-input__inner {
      color: white;
    }
    .el-range-input, .el-range-separator {
      color: white;
    }
  }
  /deep/ .date-picker-model {
    width: 90px;
    height: 24px;
  }
}
:deep(.el-date-editor) {
  opacity: 1;
}
.custom-select-option{
  color:#ffffff;
}
.custom-select-option.is-selected{
  color: #00e0ff;
}
.custom-select-option{
  background: #1C5BCC;
}
.custom-select-option:hover{
  background:#368CF2;
}
.year-range {
  display: flex;
  align-items: center;
  /deep/ .el-date-editor {
    width: 80px;
  }
  .year-range-middle-line {
    margin: 0 5px;
  }
}
</style>